window.addEventListener('load', function () {
    // 获取元素
    var arr_l = this.document.querySelector('.arr_l');
    var arr_r = this.document.querySelector('.arr_r');
    var focus = this.document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    // 1 鼠标经过focus图，左右按钮显示/隐藏
    focus.addEventListener('mouseenter', function () {
        arr_l.style.display = 'block';
        arr_r.style.display = 'block';
        // 鼠标经过 停止自动播放功能（清除定时器）
        clearInterval(timer);
        timer = null;
    })
    focus.addEventListener('mouseleave', function () {
        arr_l.style.display = 'none';
        arr_r.style.display = 'none';
        // 鼠标离开 开启自动播放功能（打开定时器）
        timer = this.setInterval(function () {
            arr_r.click();
        }, 2000)
    })
    // 动态生成小圆点  ul里有几张图片，就生成几个圆点
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    // console.log(ul.children.length);
    for (var i = 0; i < ul.children.length; i++) {
        // 创建 li
        var li = document.createElement('li');
        // 记录当前小圆圈的索引号 通过自定义属性  赋值给index
        li.setAttribute('index', i)
        // 把 li 插入到 ol 里
        ol.appendChild(li);
        // 小圆圈的排他思想，可以在生成小圆点的同时直接绑定点击变换的事件
        li.addEventListener('click', function () {
            // 点击后，先清除所有li的样式，然后再给当前被点击的li添加样式
            for (i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
                this.className = 'current';
                // 点击圆点移动 ul 里面的图片
                // ul的移动距离就是 负的 圆点的索引号乘以每个图片的宽度
                // 当点击某个小li 就拿到当前小 li 的索引号
                var index = this.getAttribute('index')
                // 当点击某个小li，就要把这个li 索引号给num
                num = index;
                // 当点击某个小li，就要把这个li 索引号给circle
                num = circle;

                var focusWidth = focus.offsetWidth;
                animate(ul, -index * focusWidth);
            }
        })
    }
    // 把 ol 里第一个小 li 设置类名为 current
    ol.children[0].className = 'current';
    // 克隆第一张图片（li）放到 ul 最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 点击右侧按钮，图片滚动一张
    var num = 0;
    // circle 控制小圆圈的播放
    var circle = 0;

    // flag节流阀  >>>>控制图片播放速度（只有当前图片滚动完，点击下一张时才能播放下一张）
    var flag = true;

    arr_r.addEventListener('click', function () {
        if (flag) {
            flag = false; //关闭节流阀
            // 如果图片已经滑动到最后一张，此时 让 ul 快速恢复原位，即把left值改为0 (无缝滚动)
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * focusWidth,  function () {
                flag = true;
            });
            // 点击右侧按钮，小圆圈跟着一起变化，可以声明一个变量（circle）控制小圆圈的变化
            circle++;
            if (circle == ol.children.length) {
                circle = 0;
            }
            circleChange();
        }
    })

    // 左侧按钮
    arr_l.addEventListener('click', function () {
       if(flag) {
           flag=false;
            // 如果图片已经滑动到最后一张，此时 让 ul 快速恢复原位，即把left值改为0 (无缝滚动)
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = - num * focusWidth + 'px';
        }
        num--;
        animate(ul, -num * focusWidth,function(){
            flag = true;
        });
        // 点击右侧按钮，小圆圈跟着一起变化，可以声明一个变量（circle）控制小圆圈的变化
        circle--;
        // if (circle < 0) {
        //     circle =  ol.children.length - 1;
        // }  可以换成三元表达式
        circle = circle < 0 ? ol.children.length - 1 : circle;
        circleChange();
       }
    })
    function circleChange() {
        // 先清除其他圆点的current样式，再给当前圆点添加类名
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    }
    // 开个定时器，实现自动播放功能
    var timer = this.setInterval(function () {
        arr_r.click();
    }, 2000)
})